<template>
    <div style="height: 100vh; overflow-y: auto">
        <div class="loyout">
            <ReportName code="report01" />
            <a-divider orientation="left">标题单数据配置</a-divider>
            <div class="loyout-ind">
                <ReportSimpleData
                    tilte="指标1"
                    reportCode="report01"
                    indKey="ind1"
                />
                <ReportSimpleData
                    tilte="指标2"
                    reportCode="report01"
                    indKey="ind2"
                />
                <ReportSimpleData
                    tilte="指标3"
                    reportCode="report01"
                    indKey="ind3"
                />
                <ReportSimpleData
                    tilte="指标4"
                    reportCode="report01"
                    indKey="ind4"
                />
                <ReportSimpleData
                    tilte="指标5"
                    reportCode="report01"
                    indKey="ind5"
                />
                <ReportSimpleData
                    tilte="指标6"
                    reportCode="report01"
                    indKey="ind6"
                />
            </div>
            <a-divider orientation="left">复合数据配置</a-divider>
            <div class="loyout-ind">
                <ReportComplexData
                    title="左上"
                    reportCode="report01"
                    indKey="ind1"
                />
                <ReportComplexData
                    title="左下"
                    reportCode="report01"
                    indKey="ind2"
                />
                <ReportComplexData
                    title="右上"
                    reportCode="report01"
                    indKey="ind3"
                />
                <ReportComplexData
                    title="右下"
                    reportCode="report01"
                    indKey="ind4"
                />
            </div>
            <a-divider orientation="left">地图数据配置</a-divider>
            <div class="loyout-map">
                <ReportComplexData
                    title="地图"
                    reportCode="report01"
                    indKey="map"
                />
            </div>
        </div>
    </div>
</template>

<script setup>
import ReportName from "@/components/config/ReportName.vue"
import ReportSimpleData from "@/components/config/ReportSimpleData.vue"
import ReportComplexData from "@/components/config/ReportComplexData.vue"
</script>

<style scoped>
.loyout {
    margin: 16px;
}
.loyout-ind {
    margin-left: 2em;
    margin-right: 2em;
    height: calc(100vh - 18em);
    overflow-y: auto;
}
.loyout-map {
    margin-left: 2em;
    margin-right: 2em;
}
</style>
